<template>
	<view class="hui">
		<view class="head">
			<u-navbar :autoBack="true" :safeAreaInsetTop="true" :placeholder="true" bgColor="transparent">
				<view class="u-nav-slot b_flex_c" slot="center">
					<view class="city">{{title}}</view>
				</view>
			</u-navbar>
		</view>
		

		<view class="time_box b_flex_c">
			<view @click="startShow=true">
				<u--input placeholder="开始时间" v-model="params.start" :readonly="true"></u--input>
			</view>

			-
			<view @click="endShow=true">
				<u--input placeholder="结束时间" v-model="params.end" :readonly="true"></u--input>
			</view>


			<view class="btn" @click="search">搜索</view>

		</view>

		

		<view class="lists_box" >

			<uni-table ref="table" :loading="loading" border stripe emptyText="暂无更多数据"
				@selection-change="selectionChange">
				<uni-tr>
					<uni-th width="50" align="center">业务员姓名</uni-th>
					<uni-th width="50" align="center">新增用户</uni-th>
					<uni-th width="50" align="center">
						开单数量
					</uni-th>
					<uni-th width="50" align="center">
						销售金额
					</uni-th>
					<uni-th width="50" align="center">
						应收金额
					</uni-th>
					<uni-th width="50" align="center">
						实收金额
					</uni-th>
					

				</uni-tr>
				<uni-tr v-for="(item, index) in list" :key="index">
					<uni-td align="center">{{ item.nickname }}</uni-td>
					<uni-td align="center">{{ item.user }}</uni-td>
					<uni-td align="center">{{ item.orderNum }}</uni-td>
					<uni-td align="center">{{ item.orderMoney }}</uni-td>
					<uni-td align="center">{{ item.orderMoney }}</uni-td>
					<uni-td align="center">{{ item.pay_total }}</uni-td>
				</uni-tr>
			</uni-table>

		</view>

		<u-datetime-picker v-if="time" :show="startShow" mode="date" v-model="start" @cancel="startShow=false"
			@confirm="setStartTime" :minDate="time.minDates" :maxDate="time.maxDates"></u-datetime-picker>

		<u-datetime-picker v-if="time" :show="endShow" mode="date" v-model="end" @cancel="endShow=false"
			@confirm="setEndTime" :minDate="time.minDates" :maxDate="time.maxDates"></u-datetime-picker>

	</view>
</template>

<script>
	import {
		TimeShow,
		ywyLists
	} from '@/require/api';
	export default {
		data() {
			return {
				title:'',
				params: {
					start: '',
					end: ''
				},
				startShow: false,
				endShow: false,
				end: '',
				start: '',
				time: '',
				chartData: '',
				chartDatas: '',
				list: [],
			}
		},
		onLoad(e) {
			if(e.title) this.title=e.title;
			console.log(Number(new Date()));
			this.getTimeShow();
		},
		methods: {
			search(){
			   
				   this.getYwyList();
			   
			},
			async getYwyList() {
				let {
					code,
					data
				} = await ywyLists(this.params);
				if (code == 1) {
					this.list = data;
				}
			},
			setEndTime(e) {

				console.log(e);
				if (e.value < this.start) return this.$project.toast('结束时间不能小于开始时间');
				this.params.end = this.$project.changeTime(e.value, 1, 2);
				this.endShow = false;
			},
			setStartTime(e) {

				console.log(e);

				if (e.value > this.end) return this.$project.toast('开始时间不能大于结束时间');

				this.params.start = this.$project.changeTime(e.value, 1, 2);
				this.startShow = false;
			},
			async getTimeShow() {
				let {
					code,
					data
				} = await TimeShow();
				if (code == 1) {
					this.time = data;
					this.start = data.maxDates;
					this.end = data.maxDates;
					this.params.start = data.maxDate;
					this.params.end = data.maxDate;

					this.getYwyList();

				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-navbar--fixed {
			background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
		}

		.u-input {
			border: 1rpx solid #eee;
		}
		
	}
     canvas{
		 z-index: 1 !important;
	 }

	.head {
		background: linear-gradient(to bottom, #B9DDFF, #D7EAF3);
	}

	.tab_box {
		box-sizing: border-box;
		padding: 0 0 5rpx 0;
		background-color: white;
	}

	.lists_box {
		margin-top: 20rpx;
		box-sizing: border-box;
		//padding: 40rpx 0 0 0;
		background-color: white;
		text-align: center;
		z-index: 0;
	}

	.time_box {
		background-color: white;
		box-sizing: border-box;
		padding: 20rpx 20rpx;
		margin-top: 20rpx;
	}

	.btn {
		background-color: #18BC9C;
		width: 150rpx;
		text-align: center;
		color: white;
		box-sizing: border-box;
		padding: 15rpx 0;
		border-radius: 15rpx;
		font-size: 26rpx;
		margin-left: 20rpx;
	}

	.title {
		padding: 20rpx 0 0 0;
	}
	
	.blue{
		color:#4092F0 ;
	}
	scroll-view ::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}
	.op{
		opacity: 0;
	}
	
	.button_box {
		box-sizing: border-box;
		padding: 6rpx 10rpx;
		border-radius: 8rpx;
		font-size: 28rpx;
	}
	
	.orange{
		background-color: #EF864F;
		color: #fff;
	}
	
	.blue{
		background-color: #3C7CFF;
		color: #fff;
		margin: 10rpx 0;
	}
	
</style>